<template>
    <div>
        <!-- 售保单汇总报表 -->
        <div class="container">
            <!-- 标题栏 -->
            <div class="headstyple">
                <el-row>
                    <el-col :span="16" class="ticket-title">报表>保险模块-售保单汇总报表</el-col>
                    <el-col :span="2">
                        <button class="check-btn form-btn" @click="check">
                            <img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询
                        </button>
                    </el-col>
                    <el-col :span="2">
                        <button class="check-btn form-btn" @click="newWindow">
                            <img src="../../assets/imgs/operation_btn_icon_xin_default.png" alt="" class="btn-img">新窗口
                        </button>
                    </el-col>
                    <el-col :span="2">
                        <button class="check-btn form-btn" @click="printer">
                            <img src="../../assets/imgs/operation_btn_icon_dayin_default.png" alt="" class="btn-img">直接打印
                        </button>
                    </el-col>
                    <el-col :span="2">
                        <button class="check-btn form-btn" @click="exportExcel">
                            <img src="../../assets/imgs/operation_btn_icon_daochu_default.png" alt="" class="btn-img">导出
                        </button>
                    </el-col>
                </el-row>
            </div>
            <div class="bottom-container">
                <el-form :model="formList" :inline="true" class="ticketForm" id="insuranceSumcss">
                    <div>
                    <el-form-item label="售票时间起">
                        <el-date-picker type="datetime" size="mini" class="minipt" default-time="00:00:00"
                                        v-model="formList.starDate" value-format="yyyy-MM-dd-HH:mm:ss"></el-date-picker>
                        止
                        <el-date-picker type="datetime" size="mini" class="minipt" default-time="23:59:59"
                                        v-model="formList.endDate" value-format="yyyy-MM-dd-HH:mm:ss"></el-date-picker>
                        <span><img src="../../assets/imgs/operation_bg_sousuo_default.png" alt="" class="btn-time"
                                   @click="sysdateinfo(1)"></span>                    </el-form-item>
                    <el-form-item label="班次日期起">
                        <el-date-picker type="date" size="mini" class="minipt" align="center"
                                        v-model="formList.busdatestart" value-format="yyyy-MM-dd"></el-date-picker>
                        止
                        <el-date-picker type="date" size="mini" class="minipt" align="center"
                                        v-model="formList.busdateend" value-format="yyyy-MM-dd"></el-date-picker>
                        <span><img src="../../assets/imgs/operation_bg_sousuo_default.png" alt="" class="btn-time"
                                   @click="sysdateinfo(2)"></span>                    </el-form-item>
                    </div>
                    <div >
                        <el-form-item label="机构">
                        <el-select multiple v-model="formList.orgname" size="mini" class="minipt" >
                            <el-option
                                    v-for="item in orgnameList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                <span style="float: left">{{ item.no }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </div>

        <!--遮罩层-->
        <div class='popContainer' v-show="modelShow"></div>
        <!--弹窗页面部分-->
        <div class="management-modal-win" v-show="modelShow">
            <!-- 标题 -->
            <el-row>
                <el-col :span="24">
                    <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf modal-img">
                    <div class="lf modal-title">{{modalTitle}}</div>
                    <div class="rf close" @click="closeModual()">X</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="msg-win">
                        <!-- 修改弹窗 -->
                        <div>
                            <el-row class="driver-container">
                                <el-col>
                                    <div>
                                        <el-table style="width: 100%" :data="DatetableData" height="290px" @row-dblclick="sysdate">
                                            <el-table-column type="index" width="20px"></el-table-column>
                                            <el-table-column prop="date_name" label="名称"></el-table-column>
                                            <el-table-column prop="date_start" label="起始日期"></el-table-column>
                                            <el-table-column prop="date_end" label="结束日期"></el-table-column>
                                            <el-table-column prop="beizhu" label="备注"></el-table-column>
                                        </el-table>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <button class="check-btn rf" @click="closeformwindows"><img
                            src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt=""
                            class="btn-img">取消
                    </button>
                </el-col>
            </el-row>
        </div>
        <!--  -->
        <div id="test1" v-html="htmlreport" class="containerhtml"> </div>


    </div>
</template>
<script>
    import "../../assets/js/jquery.js";
    import qs from "qs";
    import Kit from "../../assets/js/kit.js"


    export default {

        data() {
            return {
                formList: {
                    starDate: "",
                    endDate: "",
                    busdatestart: "",
                    busdateend: "",
                    orgname: [],
                },
                orgnameList: [],

                modelShow: false,
                modalTitle: "",
                DatetableData:"",
                infotype:"",

                htmlreport:"",
                paramObj:"",


            };
        },

        methods: {
            //机构列表
            loadbusstation(){
                this.$http
                    .post("/sys/org/nameList")
                    .then(data => {
                        this.orgnameList = data.data;
                        console.log(data)
                    })
            },
            //获取弹窗
            sysdateinfo(info){
                console.log(info);
                this.infotype = info;
                this.getsysdate();

                this.modelShow = true;
                this.modalTitle = "选择日期";
                console.log(this.modelShow);
            },
            //关闭弹窗
            closeModual() {
                this.modelShow = false;
            },
            //关闭弹窗
            closeformwindows() {
                this.modelShow = false;
            },
            //获取弹窗时间数据
            getsysdate(){
                this.DatetableData=[];
                this.$http
                    .post("/sys/customdatescope/list")
                    .then(data => {
                        console.log(data.data);
                        console.log(data.data.list);
                        for(var item of data.data.list){
                            this.DatetableData.push({
                                id:item.id,
                                date_name:item.name,
                                date_start:item.start_date,
                                date_end:item.end_date,
                                beizhu:item.remark,
                            })
                        }
                    })
            },
            //双击获取自定义日期
            sysdate(row,event){
                console.log(row);
                if(this.infotype==1){
                    this.formList.starDate = row.date_start + " 00:00:00";
                    this.formList.endDate = row.date_end + " 23:59:59";
                }else if(this.infotype==2){
                    this.formList.busdatestart = row.date_start ;
                    this.formList.busdateend = row.date_end ;
                }
                this.modelShow = false;
            },
            //时间处理,获取当天时间
            todayfunction(){
                let now = new Date();
                var nowday = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())).toISOString().slice(0, 10);
                this.nowtoday = nowday;
                console.log(nowday);
                this.formList.starDate = nowday +" 00:00:00";
                this.formList.endDate = nowday + " 23:59:59";
            },
            //encodeURI 编码
            check(){
                console.log(this.formList.orgname);
                //通过select的机构选择框，获取其名称
                let getorgnames = [];
                let getorgids = this.formList.orgname;
                if(getorgids.length>0){
                    for(let item of getorgids){
                        for(let temp of this.orgnameList){
                            if(item == temp.id){
                                getorgnames.push(temp.name);
                                continue;
                            }
                        }
                    }
                    console.log(getorgnames);
                    let parm = '[{"text":"机构:","field":"orgs","value":"'+getorgids+'","valuename":"'+getorgnames+'"},' +
                        '{"text":"售票时间起:","field":"be_sale","op":"dge","value":"'+this.formList.starDate+'","valuename":"'+this.formList.starDate+'"},' +
                        '{"text":"止:","field":"ed_sale","op":"dle","value":"'+this.formList.endDate+'","valuename":"'+this.formList.endDate+'"},' +
                        '{"text":"班次日期起:","field":"be_nullable_busdate","op":"dge","value":"'+this.formList.busdatestart+'","valuename":"'+this.formList.busdatestart+'"},' +
                        '{"text":"止:","field":"ed_nullable_busdate","op":"dle","value":"'+this.formList.busdateend+'","valuename":"'+this.formList.busdateend+'"}]';
                    let sqlparm = '{"orgs":"'+getorgids[getorgids.length-1]+'",' +
                        '"be_sale":"'+this.formList.starDate+'","ed_sale":"'+this.formList.endDate+'",' +
                        '"be_nullable_busdate":"'+this.formList.busdatestart+'","ed_nullable_busdate":"'+this.formList.busdateend+'"}';
                    //编码
                    let encodeparm = encodeURIComponent(parm);
                    let encodesqlparm = encodeURIComponent(sqlparm);
                    //执行查询
                    this.getreport(encodeparm,encodesqlparm);
                }
            },
            //查询
            getreport(type1,type2){
                this.paramObj ="";
                let rpT = "%E4%BF%9D%E9%99%A9%E6%A8%A1%E5%9D%97";
                let rpN = "%E5%94%AE%E4%BF%9D%E5%8D%95%E6%B1%87%E6%80%BB%E6%8A%A5%E8%A1%A8";
                this.$http
                    .get(
                        '/reports',
                        {
                            params:{
                                rpType: rpT,
                                rpName: rpN,
                                protype: 98,
                                rpparajson: type1,
                                sqlparajson: type2,
                            }
                        }
                    )
                    .then(data => {
                        console.log(data.data)
                        this.htmlreport = data.data;
                        //报表类别、名参数,form参数
                        this.paramObj = {
                            'rpType': rpT,
                            'rpName': rpN,
                            'protype': 98,
                            'rpparajson': type1,
                            'sqlparajson': type2,
                        };
                    })
            },
            newWindow(){
                let t = this;
                // let paramObj = t.parsePara('98');
                if(this.paramObj.protype === null){
                    t.$message.error('没有要查询的报表');
                    return;
                }
                let src = '/reports?' + qs.stringify(this.paramObj);
                console.log(src);
                window.open(t.$axios.defaults.baseURL + src);
            },
            printer(){
                let t = this;
                let paramObj = t.parsePara('101');
                if(paramObj === null){
                    t.$message.error('没有要打印的报表');
                    return;
                }
                let src = '/datan/report?' + qs.stringify(paramObj);

                let prop = Kit.proc({
                    'method' : 'getProps'
                });
                if (t._extAgentMode) {
                    if (!confirm('确认直接打印此报表?')) {
                        return;
                    }
                    let prnUrl = t.$axios.defaults.baseURL + src
                    Kit.proc({
                        'method' : 'prn',
                        'prm' : [ prnUrl, null ]
                    });
                } else {
                    t.$message.error('浏览器不支持此功能!请使用特定客户端打印!');
                }
            },
            exportExcel(){
                let t = this
                let paramObj = t.parsePara('104')
                if(paramObj === null){
                    t.$message.error('没有要导出的报表');
                    return;
                }
                let src = '/datan/report?' + qs.stringify(paramObj)
                if (t._extAgentMode) {
                    //如果是内置浏览器的客户端
                    //绝对路径
                    let saveUrl = t.$axios.defaults.baseURL + src
                    let d = new Date();
                    let report = t.form.reportType.split('@')
                    let saveFileName = report[1] + '_' + (d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()) + '.xls';
                    Kit.proc({
                        'method' : 'savFile',
                        'prm' : [ saveUrl, '导出Excel', saveFileName, 'd:\\' ]
                    });
                } else {
                    //
                    let savExcelIfr = document.getElementById('savExcelIfr')
                    savExcelIfr.src = t.$axios.defaults.baseURL + src
                    savExcelIfr.style.height = document.body.clientHeight - document.getElementById('totalHeader').clientHeight - 200 + 'px'
                }
            }

        },
        mounted(){
            this.loadbusstation();
            this.todayfunction();

        },
    }
</script>
<style scoped>
    @import url('../../assets/css/Report/insuranceSum.css');

    .check-btn {
        width: 100px;
    }
    .el-form--inline .el-form-item{
        margin-right: 130px;
    }


</style>
